<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="./lib/elementui-index.js"></script>
    <script src="./lib/axios.min.js"></script>
    <script src="./lib/token.js"></script>

    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>

</head>
<body>

<div id="app">
    <el-container>
        <el-main>
            <!-- 表格 -->
        <el-table :data="tableData">
            <el-table-column prop="cname" label="公司名称" width="180">
            </el-table-column>
            <el-table-column prop="cuser" label="公司联系人" width="180">
            </el-table-column>
            <el-table-column prop="ctel" label="联系方式" width="180">
            </el-table-column>
            <el-table-column prop="caddr" label="地址" width="120">
            </el-table-column>
            <el-table-column prop="cperson" label="客户负责人">
            </el-table-column>
            <!-- <el-table-column prop="pstate" label="当前状态">
                <template slot-scope="scope">
                    {{ scope.row.pstate | capitalize }}
                </template>
            </el-table-column> -->

            <el-table-column label="修改">
                <template slot-scope="scope">
                    <el-button @click="updateCustomer(scope.row)" type="text">修改</el-button>
                </template>
            </el-table-column>

        </el-table>

        <!-- 分页 -->
        <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
        </div>
        </el-main>
    </el-container>
</div>


<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData:'',
                pageNum:'',
                pageSize:'',
                total:'',
                dialogTableVisible: false,
                ooid:''
            }
        },
        methods:{
            getAll(){
                this.ooid = sessionStorage.ooid
                console.log(sessionStorage.ooid)
                axios.get(`http://localhost:8001/production/customer/findAll`,{
                    params:{
                        pageNum:this.pageNum,
                        pageSize:this.pageSize
                    }
                })
                .then(res=>{
                    console.log(res)
                    this.tableData = res.data.list
                    this.pageNum = res.data.pageNum
                    this.pageSize = res.data.pageSize
                    this.total = res.data.total
                    
                })
            },
            updateCustomer(row){
                sessionStorage.customer = JSON.stringify(row)
                location.href = "updateCustomer.html"
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val
                this.getAll()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageNum = val
                this.getAll()
            },
            changeSwitch(row){
                axios.delete(`http://localhost:8080/order/delOrder/${row.oid}/${row.ooo}`)
                .then(res=>{
                    console.log(res)
                    if(res.data === true){
                        this.$message({
                            message:'修改成功',
                            type:"success"
                        })
                    }else{
                        this.$message({
                            message:'修改失败',
                            type:"error"
                        })
                    }
                    this.getAll()
                })
            }
        },
        created(){
            this.getAll()
        },
        filters:{
            capitalize: function (value){
                if(value==="1"){
                    return "待生产"
                }else if(value === "0"){
                    return "已完成"
                }else if(value === "2"){
                    return "打型完成"
                }else if(value === "3"){
                    return "粘型完成"
                }else if(value === "4"){
                    return "浇铸完成"
                }else if(value === "5"){
                    return "出箱完成"
                }else if(value === "6"){
                    return "加工完成"
                }else if(value === "7"){
                    return "组装完成"
                }else if(value === "0"){
                    return "待发货"
                }
            }
        },
    })
</script>


</body>
</html>